<template>

  <div class="doc-page">
    <!-- 面包屑导航 -->
    <div class="docview-breadcrumb">
      首页 &gt; 六年级下册 &gt; 英语 &gt; 小升初 &gt; 6.12《小升初英语必考专项练习【形容词和副词】》
    </div>
    <div class="doc-main" ref="docViewMainRef">


      <div class="docview-main-wrapper" >
        <div class="docview-title"> 6.12《小升初英语必考专项练习【形容词和副词】》</div>
        <div class="docview-other-info">
          <div>
            <span><svg-icon name="author" class="sidebar-info-icon"></svg-icon></span>
            <span>bingbing123456</span>
          </div>
          <div>
            <span><svg-icon name="time" class="sidebar-info-icon"></svg-icon></span>
            <span>2025-05-28</span>
          </div>
          <div>
            <span><svg-icon name="view" class="sidebar-info-icon"></svg-icon></span>
            <span>484</span>
          </div>
          <div>
            <span><svg-icon name="download" class="sidebar-info-icon"></svg-icon></span>
            <span>99+</span>
          </div>
          <div>
            <span><svg-icon name="fileSize" class="sidebar-info-icon"></svg-icon></span>
            <span>1.66MB</span>
          </div>
          <div>
            <span><svg-icon name="pages" class="sidebar-info-icon"></svg-icon></span>
            <span>22 页</span>
          </div>
          <div>
            <span><svg-icon name="price" class="sidebar-info-icon"></svg-icon></span>
            <span>99知币</span>
          </div>
        </div>
        <!-- 主内容区 -->
        <div class="docview-main-content">
          <div class="docview-container">
            <div v-html="htmlContent" ref="htmlContentRef" class="html-content">
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧信息栏 -->
      <div class="docview-sidebar">
        <div class="sidebar-card">
          <div class="sidebar-top">
            <button class="sidebar-download">立即下载</button>
            <span class="star-icon-container"><svg-icon name="star" class="star-icon"></svg-icon></span>

          </div>
          <div class="sidebar-info">
            <div>
              <span><svg-icon name="author" class="sidebar-info-icon"></svg-icon></span>
              <span>作者：bingbin123456</span>
            </div>
            <div>
              <span><svg-icon name="category" class="sidebar-info-icon"></svg-icon></span>
              <span>分类：六年级·英语</span>
            </div>
            <div>
              <span><svg-icon name="price" class="sidebar-info-icon"></svg-icon></span>
              <span>价格：99知币</span>
            </div>
            <div>
              <span><svg-icon name="pages" class="sidebar-info-icon"></svg-icon></span>
              <span>页数：4页</span>
            </div>
            <div>
              <span><svg-icon name="fileSize" class="sidebar-info-icon"></svg-icon></span>
              <span>大小：152.42KB</span>
            </div>
            <div>
              <span><svg-icon name="fileType" class="sidebar-info-icon"></svg-icon></span>
              <span>格式：PDF</span>
            </div>
            <div>
              <span><svg-icon name="time" class="sidebar-info-icon"></svg-icon></span>
              <span>时间：2025-06-16</span>
            </div>
          </div>
        </div>
        <div class="sidebar-card ">
          <VipCard :onlyVip="true"
                   :title="'开通VIP享超值会员特权'"
                   :btnName="'马上开通VIP'" />
        </div>
        <div class="sidebar-card author-card">
          <div class="author-title">作者详情</div>
          <div class="author-info">
            <img
              src="https://img2.baidu.com/it/u=123456789,123456789&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200"
              class="author-avatar" />
            <div class="author-name">bingb...</div>
            <div class="author-fans">粉丝 45136</div>
          </div>
        </div>
        <div class="sidebar-card hot-card">
          <div class="hot-title">热门标签</div>
          <div class="hot-tags">
            <span>英语</span>
            <span>六年级</span>
            <span>小升初</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧悬浮按钮 -->
    <div class="docview-floatbar">
      <div class="floatbar-item">客服</div>
      <div class="floatbar-item">关注</div>
      <div class="floatbar-item">反馈</div>
      <div class="floatbar-item" v-show="showBackToTop" @click="scrollToTop" > 顶部 </div>
    </div>

    <!-- 底部操作栏 -->
    <div class="docview-footerbar">
      <button class="footerbar-download">立即下载</button>
      <div class="footerbar-page">1 / 4</div>
      <div class="footerbar-tools">
        <span @click="toggleZoom(!toggle)">
          <svg-icon :name="toggle ? 'smaller' : 'bigger'" class="eye-icon"></svg-icon>
        </span>
        <span @click="toggleFullscreen">
          <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" class="fullscreen-icon"></svg-icon>
        </span>
      </div>
    </div>

    <!-- 全屏覆盖层 -->
    <div v-if="isFullscreen" class="fullscreen-overlay">
      <div class="fullscreen-header">
        <div class="fullscreen-title">6.12《小升初英语必考专项练习【形容词和副词】》</div>
        <div class="fullscreen-controls">
          <div class="fullscreen-zoom-controls">
            <span @click="zoomOut" class="zoom-btn">
              <svg-icon name="smaller" class="zoom-icon"></svg-icon>
            </span>
            <span class="zoom-level">{{ Math.round(fullscreenZoom * 100) }}%</span>
            <span @click="zoomIn" class="zoom-btn">
              <svg-icon name="bigger" class="zoom-icon"></svg-icon>
            </span>
          </div>
          <div class="fullscreen-close" @click="toggleFullscreen">
            <svg-icon name="close" class="close-icon"></svg-icon>
          </div>
        </div>
      </div>
      <div class="fullscreen-content">
        <div class="fullscreen-content-wrapper">
          <div v-html="htmlContent" class="fullscreen-html-content" :style="{ transform: `scale(${fullscreenZoom})` }"></div>
        </div>
      </div>
    </div>
  </div>
<!-- pdf2htmlEX --embed-css 1 --fit-width 900 --embed-javascript 0 --embed-outline 0 --process-outline 0 --tounicode -1 -f 1 -l 4 --no-drm 1 --embed-javascript 0 --process-outline 1 ※【期末复习易错系列】【期末易错题专项提升训练】五下数学.pdf test.html-->
</template>

<script setup lang="ts">
import VipCard from '@/components/home/VipCard.vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
import { ref, computed, onMounted, onUnmounted } from 'vue'
import request from "@/utils/request";

// 通过props接收路由参数
const props = defineProps<{
  id: string
}>()

const docViewMainRef = ref<HTMLElement>()
const htmlContentRef = ref<HTMLElement>()

const sidebarShow = ref<boolean>(true)
const zoomLevel = ref(1)
const toggle = ref(false)
const isFullscreen = ref(false)
const fullscreenZoom = ref(0.8)
// 计算侧边栏显示状态
const sidebarDisplay = computed(() => sidebarShow.value ? 'flex' : 'none')
const docViewMainWidth = computed(() => toggle.value ? '1280px' : '990px' )

let htmlContent = ref('');
let showBackToTop = ref(false);



const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
};

const handleScroll = () => {
  // 当滚动距离超过300px时显示顶部按钮
  showBackToTop.value = window.scrollY > 300;
};

const toggleZoom = (isFullWidth: boolean) => {
  const docViewMainWidth = docViewMainRef.value?.scrollWidth || 1
  const htmlContentWidth = htmlContentRef.value?.scrollWidth || 1
  if (isFullWidth) {
    toggle.value = true
    // 40是边距
    zoomLevel.value = (docViewMainWidth-40) / htmlContentWidth
    sidebarShow.value = false
  } else {
    toggle.value = false
    zoomLevel.value = 1
    sidebarShow.value = true
  }
};


// 切换全屏显示
const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value
  if (isFullscreen.value) {
    document.body.style.overflow = 'hidden'
    fullscreenZoom.value = 1 // 重置缩放级别
  } else {
    document.body.style.overflow = 'auto'
  }
};

// 全屏放大
const zoomIn = () => {
  if (fullscreenZoom.value < 1.6) {
    fullscreenZoom.value += 0.2
  }
};

// 全屏缩小
const zoomOut = () => {
  if (fullscreenZoom.value > 0.5) {
    fullscreenZoom.value -= 0.2
  }
};

onMounted(() => {
  console.log('DocView component mounted with props:', props)
  console.log('DocView received id:', props.id)

  // 直接使用props中的id
  const docId = props.id || '123'

  request<any, string>({url:`/api/v1/pdf/view/${docId}`,method: "get",}).then(data => {
    htmlContent.value = data
    console.log('DocView content loaded successfully')
  }).catch(error => {
      console.error('请求错误:', error);
      // 处理错误，例如显示错误信息
    });

  // 添加滚动监听
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  // 清理滚动监听器
  window.removeEventListener('scroll', handleScroll);
  // 清理全屏状态
  document.body.style.overflow = 'auto';
});

</script>

<style scoped>

.doc-page {
  display: flex;
  justify-content: flex-start;
  background: #f5f5f5;
  min-height: calc(100vh - 75px);
  margin-top: 75px;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
  overflow: hidden;
}

.doc-main {
  display: flex;
  flex-direction: row;
  max-width: 1280px;
  gap: 10px;
  box-sizing: border-box;
  margin-bottom: 54px;
}



/***** 面包屑导航 *****/
.docview-breadcrumb {
  margin-bottom: 18px;
  color: #666;
  width: 100%;
  font-size: 14px;
  max-width: 1280px;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
  padding-left: 10px;
}

/***** 主体布局 *****/
.docview-main-wrapper {
  background: #fff;
  display: flex;
  flex-direction: column;
  max-width: 1280px;
  /*min-height: 700px;*/
  gap: 10px;
  width: v-bind(docViewMainWidth);
}

.docview-title{
  padding: 18px;
  font-size: 25px;
  font-weight: bold;
}

.docview-other-info{
  display: flex;
  gap: 15px;
  margin-top: -20px;
  padding: 20px 20px 0 20px ;
}

.docview-other-info div{
  display: flex;
  gap: 5px;
  font-size: 14px;
}

.docview-container {
  zoom: v-bind(zoomLevel);
  transition: all 0.8s ease-in-out;
  width: 100%;
  box-sizing: border-box;
  min-height: auto;

}

.html-content {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.docview-container :deep(.pf) {
  box-shadow: none;
  border: 1px solid #e4e5e5;
  max-width: 100% !important;
  border-radius: 10px;
  box-sizing: border-box;
}

.docview-container :deep(div) {
  max-width: 100% !important;
}

.docview-main-content {
  flex: 1 1 0;
  min-width: 0;
  background: #fff;
  padding: 0 20px 20px 20px;
}

/***** 右侧信息栏 *****/
.docview-sidebar {
  width: 280px;
  margin-top: 0;
  display: v-bind(sidebarDisplay);
  flex-direction: column;
  gap: 18px;
  height: 600px;
}

.sidebar-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 10px;
}
.sidebar-top{
  display: flex;
  justify-content: space-between;
}

.sidebar-download {
  width: 80%;
  background: #ff7d1a;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 17px;
  font-weight: bold;
  padding: 10px 0;
  margin-bottom: 16px;
  cursor: pointer;
  height: 45px;
  box-sizing: border-box;
}
.star-icon-container{
  display: flex;
  /* align-content: stretch; */
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  background-color: #f6f6f6;
  text-align: center;
  line-height: 45px;
  border-radius: 4px;
}
.star-icon{
  width: 35px;
  height: 35px;
  fill: #d2d1d1;
}

.star-icon:hover{
  fill: #efa042;
}

.sidebar-info div {
  display: flex;
  font-size: 14px;
  color: #444;
  margin-bottom: 4px;
  gap:5px;
}

.sidebar-info-icon{
  width: 20px;
  height: 20px;
}

.docview-sidebar .sidebar-card:nth-child(2){
  padding:0;
}

.vip-card {
  background: #fffbe6;
}

.vip-title {
  font-size: 16px;
  color: #e6a23c;
  font-weight: bold;
  margin-bottom: 8px;
}

.vip-list {
  padding-left: 18px;
  margin-bottom: 10px;
  color: #b26d00;
  font-size: 14px;
}

.vip-btn {
  width: 100%;
  background: #ffb800;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 15px;
  font-weight: bold;
  padding: 8px 0;
  cursor: pointer;
}

.author-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.author-title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 8px;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #eee;
}

.author-name {
  font-size: 15px;
  font-weight: bold;
}

.author-fans {
  font-size: 13px;
  color: #888;
}

.hot-card {
  background: #f7f8fa;
}

.hot-title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 8px;
}

.hot-tags span {
  display: inline-block;
  background: #e6f7ff;
  color: #1890ff;
  border-radius: 3px;
  padding: 2px 8px;
  margin-right: 6px;
  font-size: 13px;
}

/***** 右侧悬浮按钮 *****/
.docview-floatbar {
  position: fixed;
  right: 24px;
  top: 220px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 99;
}

.floatbar-item {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 8px 12px;
  color: #2176e6;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
}

/***** 底部操作栏 *****/
.docview-footerbar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 54px;
  background: #fff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 101;
  gap: 32px;
}

.footerbar-download {
  background: #ff7d1a;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 17px;
  font-weight: bold;
  padding: 8px 32px;
  cursor: pointer;
}

.footerbar-page {
  font-size: 15px;
  color: #333;
  margin: 0 18px;
}

.footerbar-tools span {
  font-size: 18px;
  color: #108dfd;
  margin: 0 6px;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
}

.footerbar-tools .eye-icon {
  width: 32px;
  height: 32px;
  fill: #4a90e2;;
}

.footerbar-tools .fullscreen-icon {
  width: 32px;
  height: 32px;
  fill: #4a90e2;
}

.back-to-top {
  background: #ff7d1a !important;
  color: #fff !important;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.back-to-top:hover {
  background: #e66a00 !important;
  transform: translateY(-2px);
}

/***** 全屏覆盖层 *****/
.fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fullscreen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  border-bottom: 1px solid #e4e5e5;
  background: #fff;
}

.fullscreen-controls {
  display: flex;
  align-items: center;
  gap: 20px;
}

.fullscreen-zoom-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f5f5f5;
  border-radius: 20px;
  padding: 8px 16px;
}

.zoom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.zoom-btn:hover {
  background: #e4e5e5;
  transform: scale(1.1);
}

.zoom-icon {
  width: 18px;
  height: 18px;
  fill: #666;
}

.zoom-level {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  min-width: 40px;
  text-align: center;
}

.fullscreen-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.fullscreen-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f5f5f5;
  cursor: pointer;
  transition: background 0.3s ease;
}

.fullscreen-close:hover {
  background: #e4e5e5;
}

.close-icon {
  width: 20px;
  height: 20px;
  fill: #666;
}

.fullscreen-content {
  flex: 1;
  overflow: auto;
  padding: 20px;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  min-height: 0;
}

.fullscreen-content-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: visible;
}

.fullscreen-html-content {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  min-height: fit-content;
  padding: 10px;
  box-sizing: border-box;
  transform-origin: center top;
  transition: transform 0.3s ease;
}

.fullscreen-html-content :deep(*) {
  box-shadow: none;
  max-width: 100% !important;
}

.fullscreen-html-content :deep(.pf) {
  box-shadow: none;
  border: 1px solid #e4e5e5;
  border-radius: 10px;
  box-sizing: border-box;
}


</style>
